<template>
  <view>
    <view class="box-top" v-for="(item, i) in dataList" :key="i">
      <!-- <view class="left-box-top " v-if="i === 0" >{{statusArr[item.status-1]}}</view> -->
      <view class="left-box-top"></view>
      <!-- 左边 -->
      <view class="line" :class="{ none: i == dataList.length - 1 }"><!-- 中线 -->
        <!-- 圆点 -->
        <!-- <view  v-if="item.status === 4 || item.status === 6 " class="dotpuls"  ></view>
				<view v-else class="dot"></view> -->

        <view v-if="i == 0 && showFinshIcon" class="dotpulsImg">
          <image src="@/static/images/maintain/okk.png" mode=""></image>
        </view>
        <view class="dot" v-else></view>
      </view>
      <view class="right-box-top">

        <!-- 右边 -->
        <view class="actTit leftAct" v-if="item.executor">
          <text class="user-name">{{ strLenght(item.executor) }}</text>
          <text class="info-name">{{ item.typeName }}</text>
       
          <text class="checkImg" @click="seeClick(item.extPlus.image)" v-if="(item.typeName == '签到开始' ||
            item.typeName == '签退' ||
            item.typeName == '签字') && item.extPlus &&
            item.extPlus.image
          ">
            {{
              item.typeName == "签字"
                ? "查看签字"
                : item.typeName == "签到开始"
                  ? "查看入场照"
                  : "查看退场照"
            }}
          </text>
             <!-- ai合规情况结论 S -->
             <view v-if="item.modelId" @click="seeClick(item.extPlus.image)"
            :class="['ai-result', ['gre', 'org', 'red'][item.aiResult]]">
            <image class="ai-result-ico" src="@/static/images/ai.svg"></image>
            <text>
              {{ ['合规', '疑似合规', '不合规'][item.aiResult] }}
            </text>
          </view>
          <!-- ai合规情况结论 E -->

          <!-- 维保端报障 -->
          <text class="newStr" v-if="item.extPlus && item.extPlus.planSource">{{
            `【${item.extPlus.planSource}】`
            }}</text>
          <!-- 分派给任务给谁 -->
          <text class="newStr" v-if="item.extPlus && item.extPlus.planUser">{{
            `【${item.extPlus.planUser}】`
            }}</text>
        </view>
        <!-- 是否显示超时标签 -->
        <view class="actTit actImg" style="padding: 12rpx 0"
          v-if="item.extPlus && item.extPlus.planArriveDate && item.extPlus.signDate">
          <image v-if="createTimeRes(item)" src="/static/images/maintain/funnelRED.png"></image>
          <image v-else src="/static/images/maintain/funnel.png"></image>
          <text :class="createTimeRes(item) ? 'timeout-time' : 'timeout-time timeout-time2'">{{ restDataTime(item) }}
          </text>
          <text :class="createTimeRes(item) ? 'timeout-text' : 'timeout-text timeout-text2'">{{ createTimeRes(item) ?
            "超时到达" : "准时达" }}</text>
        </view>
        <view class="actTit actImg" style="margin-bottom: rpx; color: #e02020"
          v-if="item.extPlus && item.extPlus.expDesc">
          <image v-if="item.extPlus && item.extPlus.signStatus !== 1"
            :src="item.extPlus && item.extPlus.expDesc ? arrColor[1] : arrColor[0]" mode="">
          </image>
          <image v-else :src="arrColor[4]" mode=""></image>
          <text v-if="item.extPlus">{{ item.extPlus.expDesc || "" }}</text>
        </view>

        <view class="actTit actImg" v-if="item.extPlus && item.extPlus.address">
          <image :src="item.extPlus.expDesc ? '' : arrColor[0]" mode=""></image>
          <text class="acTaddress">
            {{
              item.typeName == "提交"
                ? "提交地址:"
                : item.typeName == "签到开始"
                  ? "签到地址:"
                  : "签退地址:"
            }}{{ item.extPlus.address || "" }}
          </text>
        </view>

        <view class="actTit actImg" style="padding: 12rpx 0" v-if="item.createTime">
          <image src="@/static/images/maintain/times.png" mode=""></image>
          {{ item.createTime }}
        </view>

        <!-- <view class="actTit actImg" style="margin-bottom:rpx; color:red;" v-if="item.takeUpTime && item.signErrorType" >
					<image :src="restData(item.signErrorType)?arrColor[3]:arrColor[2]" mode=""></image>
					{{restData(item.signErrorType)}}
				</view> -->
        <!-- <view class="actTit" style="margin-bottom:12rpx; margin-left: 30rpx; margin-top: 5rpx;" v-if="item.takeUpTime" >
					耗时:{{item.takeUpTime}}
				</view> -->
        <!-- <view class="actTit actImg" style="margin-bottom:12rpx; color:red;" v-if="item.signErrorType && restAddres(item.signErrorType)" >
					<image :src="restAddres(item.signErrorType)?arrColor[1]:arrColor[0]" mode=""></image>	
					{{restAddres(item.signErrorType)}}
				</view> -->
        <!--   <view class="actTit actImg"   v-if="item.latitude && item.longitude" >
					<image src="/static/images/maintain/address.png" mode=""></image>	
					<text style="color:#0091ff;cursor: pointer;" @click="seeAddressClick(item)">查看地址</text>
				</view> -->
      </view>
    </view>
  </view>
</template>

<script>
import { timeDiffFn } from '@/utils/utils.js';
import dayjs from 'dayjs';
export default {
	data() {
		return {
			statusArr: ['待处理', '进行中', '待签到', '已完成', '已停用', '已签字'],
			signErrorArr: ['', '定位异常', '时间超长', '时间过短'],
			arrColor: [
				'/static/images/maintain/address.png',
				'/static/images/maintain/addressRED.png',
				'/static/images/maintain/funnel.png',
				'/static/images/maintain/funnelRED.png',
				'/static/images/maintain/computer.png',
			],
			isDateShow: false,
		};
	},
	props: {
		dataList: {
			type: Array,
			default: () => [],
		},
		statusShow: {
			type: Boolean,
			default: true,
		},
		// 工单类型
		typeStatus: {
			type: Number,
			default: 2,
		},
	},
	mounted() {
		console.log(this.dataList, 'dataList');
	},
	computed: {
		showFinshIcon() {
			if (this.typeStatus == 2 || this.typeStatus == 5) {
				console.log('事务工单');
				if (this.dataList[1].planStatus == 4) {
					return true;
				}
			}
			if (this.typeStatus == 3) {
				if (this.dataList[1].planStatus == 5) {
					return true;
				}
			} else {
				return false;
			}
		},

	},

	methods: {
		seeClick(url) {
			this.$emit('seeClick', url);
		},
		seeAddressClick(obj) {
			uni.openLocation({
				latitude: parseFloat(obj.latitude),
				longitude: parseFloat(obj.longitude),
				name: obj.buildingName,
				address: obj.buildingAddress,
				scale: 18,
				complete: (e) => {
					console.log(e);
				},
				success(e) { },
			});
			this.$emit('seeAddressClick', obj);
		},

		strLenght(val) {
			if (val.length > 10) {
				return val.substring(0, 10) + '...';
			}
			return val;
		},

		// 定位正常不显示
		// restStateFn(str){
		// 	 let strArr = str || ""
		// 	 let arr = strArr.split(',')
		// 	 if(arr.length > 0){
		// 		 if(arr[0] == 1){
		// 			 return true
		// 		 }
		// 	 }
		// 	 return false
		// },
		// 定位异常显示文本
		restAddres(str) {
			let strArr = str || '';
			let arr = strArr.split(',');
			if (arr.length > 0) {
				if (arr[0] == 1) {
					return '定位异常';
				}
			}
			return '';
		},
		restData(str, type) {
			let strArr = str || '';
			let arr = strArr.split(',');
			let signErrorArr = ['', '定位异常 ', '时间超长 ', '时间过短 '];
			let strs = '';
			if (arr.length > 0 && arr.length === 1) {
				return (strs = signErrorArr[arr[0]]);
			}
			if (arr.length >= 2) {
				return (strs = signErrorArr[arr[1]]);
			}
			return strs;
		},
		// 时间
		restDataTime(obj) {
			if (obj.extPlus && obj.extPlus.planArriveDate && obj.extPlus.signDate) {
				let createTime = new Date(obj.extPlus.createTime).getTime();
				let str = '';
				let resTimeObj = {};
				if (obj.extPlus.planArriveDate >= obj.extPlus.signDate) {// 准时达
					resTimeObj = timeDiffFn(dayjs(obj.extPlus.signDate).format('YYYY-MM-DD HH:mm:ss'), 0, dayjs(createTime).format('YYYY-MM-DD HH:mm:ss'));
					str = (resTimeObj.hours > 0 ? resTimeObj.hours + 'h' : '') + (resTimeObj.minutes > 0 ? resTimeObj.minutes + 'min' : '');
				}
				if (obj.extPlus.signDate > obj.extPlus.planArriveDate) {// 超时达
					resTimeObj = timeDiffFn(dayjs(obj.extPlus.signDate).format('YYYY-MM-DD HH:mm:ss'), 0, dayjs(obj.extPlus.planArriveDate).format('YYYY-MM-DD HH:mm:ss'));
					str = (resTimeObj.day > 0 ? resTimeObj.day + 'd' : '') + (resTimeObj.hours > 0 ? resTimeObj.hours + 'h' : '') + (resTimeObj.minutes >= 0 ? (resTimeObj.minutes + 1) + 'min' : '');
				}
				return str;
			}
		},
		createTimeRes(obj) {
			if (obj.extPlus && obj.extPlus.planArriveDate) {
				let createTime = new Date(obj.createTime).getTime();
				if (createTime > obj.extPlus.planArriveDate) {
					return true;
				}
			}
			return false;
		}
	},
};
</script>

<style lang="scss" scoped>
.box-top {
  // margin-top: 30px;

  width: 100%;
  // min-height: 120px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  font-size: 28rpx;

  .left-box-top {
    width: 1rpx;
    text-align: left;
    font-size: 28rpx;
    font-weight: 500;
    color: #0091ff;
    margin-left: 30rpx;
  }

  .line {
    width: 2rpx;
    background-color: rgba(228, 231, 237, 1);
    margin: 0 30rpx 0 20rpx;
    position: relative;
    top: 10rpx;

    // padding: 10px 0 10px 0;
    .dot {
      width: 16rpx;
      height: 16rpx;
      background-color: #fff;
      border: 2rpx #0091ff solid;
      border-radius: 50%;
      position: absolute;
      left: -8rpx;
      top: 0rpx;
    }

    .dotpuls {
      width: 60rpx;
      height: 60rpx;
      position: relative;
      left: -16rpx;
      top: -20rpx;
      line-height: 60rpx;
    }

    .dotpulsImg {
      width: 60rpx;
      height: 60rpx;
      position: relative;
      left: -14rpx;
      top: -6rpx;

      // line-height: 60rpx;
      image {
        width: 32rpx;
        height: 32rpx;
      }
    }

    .dotpuls:before {
      content: "";
      width: 30rpx;
      height: 30rpx;
      border: 2rpx solid #0091ff;
      background: #0091ff;
      display: inline-block;
      border-radius: 50%;
      vertical-align: middle;
    }

    .dotpuls:after {
      content: "";
      width: 17rpx;
      height: 10rpx;
      border: 2rpx solid #ffffff;
      border-top: transparent;
      border-right: transparent;
      text-align: center;
      display: block;
      position: absolute;
      top: 24rpx;
      left: 9rpx;
      transform: rotate(-65deg);
    }
  }

  .right-box-top {
    position: relative;
    flex: 1;
    padding: 0 0 40rpx 0;
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;

    // margin-top: -8px;
    .see {
      font-size: 28rpx;
      font-weight: 400;
      color: #0091ff;

      text {
        display: inline-block;
        margin: 0 10rpx 0 10rpx;
        width: 30rpx;
        height: 30rpx;
        line-height: 30rpx;
        border-bottom: 2rpx #0091ff solid;
        border-right: 2rpx #0091ff solid;
        transform: rotate(-45deg);
      }
    }

    .actTit {
      font-size: 28rpx;
      font-weight: 400;
      color: #999999;

      // height: 30rpx;
      text {}
    }

    .actImg {
      image {
        width: 28rpx;
        height: 28rpx;
        margin-right: 7rpx;
        vertical-align: top;
        margin-bottom: 5rpx;
        margin-top: 7rpx;
        display: inline-block;
      }

      .acTaddress {
        display: inline-block;
        width: 570rpx;
      }
    }

    .leftAct {
      // height: 30rpx;
      font-size: 28rpx;
      // line-height: 1;
      margin-bottom: 10rpx;

      text {
        display: inline-block;
      }

      .user-name{
        color: #0091ff;
        font-weight: 600;
      }

     .info-name {
        color: #333333;
        font-weight: 600;
        margin-left: 10rpx;
      }

      .checkImg {
        color: #0091ff;
        float: right;
        margin-right: 20rpx;
        cursor: pointer;
      }

      .newStr {
        color: #333;
      }
    }

    .content {
      margin: 20rpx 0 20rpx 0;
    }
  }
}

.timeout-time {
  color: #E02020;
}

.timeout-time2 {
  color: #16bf99;
}

.timeout-text {
  color: #E02020;
  display: inline-block;
  padding: 0 4rpx;
  border-radius: 4rpx;
  background: #fcece2;
  margin-left: 4rpx;
}

.timeout-text2 {
  color: #16bf99;
  background: #E3FFF6;
}

.activeTit {
  font-size: 56rpx;
  font-weight: 600;
  color: #333333;
}

.active {
  background-color: rgba(44, 143, 233, 1) !important;
}

.none {
  background-color: rgba(0, 0, 0, 0) !important;
}

.ai-result {
  // position: absolute;
  // top: 43rpx;
  // right: 20rpx;
  color: #fff !important;
  float: right;
  display: flex;
  align-items: center;
  border-radius: 8rpx;
  color: #fff;
  font-size: 24rpx;
  padding: 2rpx 12rpx 6rpx 12rpx;
  vertical-align: unset;
  font-weight: normal;
  margin-right: 8rpx;

  &-ico {
    width: 23rpx;
    height: 23rpx;
    margin-right: 4rpx;
  }
}

.gre {
  background-color: #68CA00;
}

.org {
  background-color: #FF7505;
}

.red {
  background-color: #E02020;
}
</style>
